import "../assets/fonts/RobotoMono-Light.ttf";
import "../assets/fonts/Lato-Regular.ttf";
import {Theme} from "globals.slint";
import { ToolTip, TTPosition } from "tooltip.slint";


export component BorderlessWindow inherits Window {
    no-frame: true;
    default-font-family: "Lato";
    min-width: 200px;
    min-height: 200px;

    in property <string> parent;
    out property<bool> menu-open <=> menu-btn.toggled;

    callback close();
    callback minimize();
    callback move();
    callback menu-toggled();

    VerticalLayout {
        padding: 0;

        // Title Bar
        Rectangle {
            height: 38px;
            background: Theme.background;
            HorizontalLayout {
                padding-right: 7px;
                padding-left: 7px;

                //Below is the Menu button that opens the sliding popover.
                //And has the animation to conver the menu bars to a back arrow
                menu-btn := Rectangle {
                    property<bool> toggled: false;

                    property<int> mt-1-x: menu-btn.width * 0.2/1px;
                    property<int> mt-1-y: menu-btn.height * 0.5/1px;

                    property<int> lt-1-x: menu-btn.width * 0.2/1px;
                    property<int> lt-1-y: menu-btn.height * 0.15/1px;

                    property<int> mt-2-x: menu-btn.width * 0.2/1px;
                    property<int> mt-2-y: menu-btn.height * 0.5/1px;

                    property<int> lt-2-x: menu-btn.width * 0.60/1px;
                    property<int> lt-2-y: menu-btn.height * 0.85/1px;

                    animate mt-1-x, mt-1-y, lt-1-x, lt-1-y, mt-2-x, mt-2-y, lt-2-x, lt-2-y {
                        duration: 200ms;
                        easing: ease-in-out;
                    }

                    y: parent.height/2 - self.height/2;
                    width: parent.height * 0.75;
                    height: parent.height * 0.75;

                    menuBtn-ta := TouchArea {
                        clicked => {
                            toggled = !toggled;
                            root.menu-toggled();
                        }
                    }
                    Path {
                        stroke: menuBtn-ta.has-hover? closeBtn-ta.pressed? Theme.background-lightest: Theme.accent : Theme.background-lightest;
                        stroke-width: 2px;
                        viewbox-height: parent.height/1px;
                        viewbox-width: parent.width/1px;

                        MoveTo {
                            x: mt-1-x;
                            y: mt-1-y;
                        }

                        LineTo {
                            x: lt-1-x;
                            y: lt-1-y;
                        }

                        MoveTo {
                            x: mt-2-x;
                            y: mt-2-y;
                        }

                        LineTo {
                            x: lt-2-x;
                            y: lt-2-y;
                        }
                    }

                    states [
                        open when self.toggled: {
                            mt-1-x: menu-btn.width * 0.2/1px;//top left
                            mt-1-y: menu-btn.height * 0.5/1px;

                            lt-1-x: menu-btn.width * 0.60/1px;//top right
                            lt-1-y: menu-btn.height * 0.15/1px;

                            mt-2-x: menu-btn.width * 0.2/1px;//bottom left
                            mt-2-y: menu-btn.height * 0.5/1px;

                            lt-2-x: menu-btn.width * 0.6/1px;//bottom right
                            lt-2-y: menu-btn.height * 0.85/1px;
                        }

                        closed when !self.toggled: {
                            mt-1-x: menu-btn.width * 0.1/1px;
                            mt-1-y: menu-btn.height * 0.333/1px;

                            lt-1-x: menu-btn.width * 0.90/1px;
                            lt-1-y: menu-btn.height * 0.333/1px;

                            mt-2-x: menu-btn.width * 0.1/1px;
                            mt-2-y: menu-btn.height * 0.667/1px;

                            lt-2-x: menu-btn.width * 0.50/1px;
                            lt-2-y: menu-btn.height * 0.667/1px;
                        }
                    ]
                }
                //this below rectangle is just to create an even amount of objects
                //in the horizontal layout so the title text ends up in the middle
                //this is a bit hacky, but a quick way to get it centered while I
                //work on other stuff...need to come back to this.
                Rectangle {
                    y: parent.height/2 - self.height/2;
                    visible: false;
                    width: parent.height * 0.75;
                    height: parent.height * 0.75;
                    background: red;
                }

                Text {
                    text: root.title;
                    font-size: 13pt;
                    color: Theme.short-round;
                    vertical-alignment: center;
                    horizontal-alignment: center;
                    TouchArea {
                        moved => {
                            if (self.pressed && self.enabled) {
                                root.move();
                            }
                        }
                    }
                }

                Rectangle {
                    y: parent.height/2 - self.height/2;
                    width: parent.height * 0.75;
                    height: parent.height * 0.75;

                    minBtn-ta := TouchArea {
                        clicked => { root.minimize() }
                    }
                    Image {
                        source: @image-url("../assets/icons/minimize.svg");
                        animate colorize {
                            duration: 250ms;
                            easing: ease-in-out;
                        }

                        states [
                            hvr when minBtn-ta.has-hover : {
                                colorize: Theme.accent;
                            }

                            nthvr when !minBtn-ta.has-hover : {
                                colorize: Theme.background-lightest;
                            }
                        ]
                    }

                }

                Rectangle {
                    y: parent.height/2 - self.height/2;
                    width: parent.height * 0.75;
                    height: parent.height * 0.75;
                    closeBtn-ta := TouchArea {
                        clicked => { root.close() }
                    }
                    Image {
                        source: @image-url("../assets/icons/close.svg");
                        colorize: closeBtn-ta.has-hover? closeBtn-ta.pressed? Theme.background-light: Theme.focus-round : Theme.background-lightest;
                        animate colorize {
                            duration: 250ms;
                        }
                    }
                }
            }
        }
        Rectangle {
            background: Theme.background;
            @children
        }
    }

    settings-tt := ToolTip {
        owner-x: menuBtn-ta.absolute-position.x;
        owner-y: menuBtn-ta.absolute-position.y;
        owner-height: menuBtn-ta.height;
        owner-width: menuBtn-ta.width;
        position: TTPosition.Right;
        show: menuBtn-ta.has-hover;
        text: "Settings";
    }
}